<template>
    <div class="section-wrap" id="illegalDetails2" style="overflow-x: hidden;">
        <div class="headerBox">
            <div class="header">
                <x-icon type="ios-arrow-left" size="" class="icon-white" @click="$router.go(-1)"></x-icon>
                我的违章整改
            </div>
        </div>
        <div class="form-section" style="margin-top: 60px;margin-bottom: 0;">
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>项目名称</label>
                </div>
                 <div>{{info.departName}}</div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>项目管理单位</label>
                </div>
<div>{{info.panrentDepartName}}</div>

            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>业主项目经理</label>
                </div>
<div>{{info.charge}}</div>

            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章登记人</label>
                </div>
<div>{{info.weizRegisterPerson}}</div>

            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章时间</label>
                </div>
<div>{{info.weizDate}}</div>

            </div>
            <div class="form-item form-item-style1" style="border-bottom: none;height: auto;padding: 10px 10px 10px 30px;">
                <div class="label-title"  style="line-height: normal;">
                    <label>违章人员名称</label>
                </div>
                    <div class="input_div" style="width: 260px;line-height: normal;text-align:right">
                    {{info.weizPersonName}}
                    </div>
            </div>
            <div class="form-item form-item-style1" style="border-bottom: none;height: auto;padding: 10px 10px 10px 30px;">
                <div class="label-title"  style="line-height: normal;">
                    <label>违章地点</label>
                </div>
                    <div class="input_div" style="width: 260px;line-height: normal;text-align:right">
                    {{info.weizAddress}}
                    </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章人员所属参建单位</label>
                </div>
<div>{{info.weizPersonDepartName}}</div>

            </div>
            <div class="form-item form-item-style1" style="height: 140px;flex-wrap: wrap;height: auto;padding: 10px 10px 10px 30px;">
                <div class="left_label" style="display: block;line-height: normal;">
                    <label>违章图片</label>
                </div>
                <div style="float:left;display: flex;flex-wrap: wrap;">
                    <img  v-for='item3 in list' :key="item3.id" :src="item3.src" alt="" @click="previewImg(item3.src)" style="width:80px;height:80px;margin-right:10px;">
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章迹象</label>
                </div>
<div>{{info.weizPhenItemListName}}</div>

            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章编号</label>
                </div>
<div>{{info.weizNo}}</div>

            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章标准编号</label>
                </div>
<div>{{info.weizPhenItemListNo}}</div>

            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章整改期限</label>
                </div>
<div>{{info.weizAbarbeitungEndDate}}</div>

            </div>

            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章验收单位</label>
                </div>
<div>{{info.weizAbarbeitungEndDate}}</div>

            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章验收人员</label>
                </div>
<div>{{info.weizCheckPersonName}}</div>

            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章现象抄送人</label>
                </div>
<div>{{info.checkNo}}</div>

            </div>
            <!-- 新增选项 -->
            <div class="model" v-for="(item,index) in info.rectifyList" :key="index">
                <!-- 违章整改信息 查-->
                <div v-if='item.rectifystatus==1'>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label style="color:#1545d2;font-weight: bold;">违章整改信息第({{index+1}})</label>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>违章整改责任人</label>
                        </div>
                        <div>{{info.weizCheckZrrName}}</div>

                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>整改完成时间</label>
                        </div>
                        <group style="margin-right:-20px">
                            <input type="text" v-model="item.rectifydate" disabled style="padding-right:20px">
                        </group>
                    </div>
                    <div class="form-item form-item-style1" style="height: 140px;flex-wrap: wrap;height: auto;padding: 10px 10px 10px 30px;">
                        <div class="left_label" style="display: block;line-height: normal;">
                            <label>整改后图片</label>
                        </div>
                        <div style="float:left;display: flex;flex-wrap: wrap;">
                            <img  v-for='item3 in item.rectifyImgList' :key="item3.id" :src="item3.url" alt="" @click="previewImg(item3.url)" style="width:80px;height:80px;margin-right:10px;">
                        </div>
                    </div>
                    <div class="form-item form-item-style1" style="border-bottom: none;height: auto;padding: 10px 10px 10px 25px;">
                        <div class="label-title"  style="line-height: normal;">
                            <label>整改情况回复</label>
                        </div>
                          <div class="input_div" style="width: 260px;line-height: normal;text-align:right">
                          {{item.rectifydateRemark}}
                          </div>
                    </div>
                </div>
                <!-- 违章整改信息 改-->
                <div v-if="status2==1 && item.rectifystatus==0">
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label style="color:#1545d2;font-weight: bold;">违章整改信息第({{index+1}})次</label>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>违章整改责任人</label>
                        </div>
<div>{{info.weizCheckZrrName}}</div>

                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>整改完成时间</label>
                        </div>
                        <group style="margin-right:-20px" >
                            <datetime v-model="end" format='YYYY-MM-DD HH:mm:00' @on-change='time' :start-date="startDate"></datetime>
                        </group>
                    </div>
                     <div class="form-item form-item-style2">
                        <div class="label-title space-between">
                            <label>违章整改后图片</label>
                            <!-- <span>当前共{{detailinfo.projectImgList!=null?detailinfo.projectImgList.length:0}}张照片</span> -->
                        </div>
                        <div class="upload-wrap">
                            <upload
                            :imgList="item.rectifyImgList"
                            @setFormData="setYSFormData"
                            ></upload>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>整改情况回复</label>
                        </div>
                        <div class="input_div" @click="classValue=true">
                            <!-- <div>{{rectifydateRemark}}</div> -->
                            <input type="text" v-model="rectifydateRemark" disabled placeholder="请输入">
                        </div>
                    </div>
                </div>
                <!-- 违章验收信息 查-->
                <div v-if='item.checkstatus==1'>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label style="color:#1545d2;font-weight: bold;">违章验收信息第({{index+1}})次</label>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>违章验收人员</label>
                        </div>
<div>{{info.weizCheckPersonName}}</div>
                        <!-- <div class="input_div">
                            <input type="text" v-model="info.weizCheckPersonName" disabled placeholder="请选择">
                        </div> -->
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>验收时间</label>
                        </div>
<div>{{item.checkdate}}</div>
                        <!-- <div class="input_div">
                            <input type="text" v-model="item.checkdate" disabled>
                        </div> -->
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>违章验收结论</label>
                        </div>
<div>{{item.checkResults}}</div>
                        <!-- <div class="input_div">
                            <input type="text" v-model="item.checkResults" disabled>
                        </div> -->
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>违章验收方式</label>
                        </div>
<div>{{item.checkMode}}</div>
                        <!-- <div class="input_div">
                            <input type="text" v-model="item.checkMode" disabled>
                        </div> -->
                    </div>
                    <div class="form-item form-item-style1" style="height: 140px;flex-wrap: wrap;height: auto;padding: 10px 10px 10px 30px;">
                        <div class="left_label" style="display: block;line-height: normal;">
                            <label>验收图片</label>
                        </div>
                        <div style="float:left;display: flex;flex-wrap: wrap;">
                            <img  v-for='item3 in item.checkImgList' :key="item3.id" :src="item3.url" alt="" @click="previewImg(item3.url)" style="width:80px;height:80px;margin-right:10px;">
                        </div>
                    </div>
                    <div class="form-item form-item-style1" style="border-bottom: none;height: auto;padding: 10px 10px 10px 25px;">
                        <div class="label-title"  style="line-height: normal;">
                            <label>违章验收意见</label>
                        </div>
                          <div class="input_div" style="width: 260px;line-height: normal;text-align:right">
                          {{item.checkIdea}}
                          </div>
                    </div>
                </div>
                <!-- 违章验收信息 改 -->
                <!-- <div v-if="status2==2 && item.checkstatus==0">
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label style="color:#1545d2;font-weight: bold;">违章验收信息第({{index+1}})次</label>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>违章整改责任人</label>
                        </div>
                        <div class="input_div">
                            <input type="text" v-model="info.weizCheckZrrName" disabled placeholder="请选择">
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>整改完成时间</label>
                        </div>
                        <group style="margin-right:-20px">
                            <datetime v-model="end"></datetime>
                        </group>
                    </div>
                    <div class="imgDiv">
                        <div class="left_label">整改后图片</div>
                        <div class="imgUl" >
                            <img :src="data.url" alt="" v-for="(data,index) in item.checkImgList" :key="index">
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>验收后图片</label>
                        </div>
                        <div class="input_div" @click="$router.push('./demo2')">
                            <input type="text" v-model="item.weizCheckRemark" disabled placeholder="请输入">
                        </div>
                    </div>
                </div> -->
            </div>
            <div class="btns_div">
                <a class="submitBtn" @click="enter">提 交</a>
                <a class="cancelBtn" @click="$router.go(-1)">取消</a>
            </div>
        </div>
        <div v-transfer-dom>
            <popup v-model="classValue" width="100%" height="300px">
                <group>
                     <x-textarea :max="50" name="description" placeholder="请输入" v-model="checkArea" id="tt"></x-textarea>
                </group>
                <p class="transfer_p"><span @click="ent">确定</span> <em @click="clear">清空</em></p>
            </popup>
            <previewer :list="list" ref="previewer"  @on-index-change="logIndexChange"></previewer>
        </div>
        <el-dialog :visible.sync="flag"  fullscreen center>
        <img :src="selectImg" alt="" width="100%">
        </el-dialog>
    </div>
</template>
<script>
import upload from "@/commonComponents/upload/upload";
import formatDate from "../../utils/formatDate";
import { XHeader,Tabbar, TabbarItem, Group, Cell ,TransferDom,Popup,XTextarea} from 'vux'
import LoadMore from "vux/src/components/load-more/index";
export default {
  data() {
    return {
        selectImg:'',
        flag: false,
        status2:0,
        rectifyImgList:[],
       startDate:'',
       end:'',
       params: {
        id:'',
       },
       info:{
           rectifyList:{
               rectifydate:'',
               rectifydateRemark:'',
               
              }
       },
       classValue:false,
       checkArea:'',
       imgList:[],
       rectifydateRemark:'',
        YSFormData: "",
        YSuploadLength: '',
        num:false,
        list:[],
        options: {
            getThumbBoundsFn (index) {
                let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
                let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
                let rect = thumbnail.getBoundingClientRect()
                return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
            }
        },
    };
  },
  components: {
      Popup,
      XTextarea,
      upload
  },
  directives:{
      TransferDom
  },
  created() {
    this.$store.state.illegalType =5
    var myDate = new Date(); //实例一个时间对象；
    myDate.getFullYear();   //获取系统的年；
    myDate.getMonth()+1;   //获取系统月份，由于月份是从0开始计算，所以要加1
    var m =myDate.getMonth()+1<10?'0'+(myDate.getMonth()+1):myDate.getMonth()+1
    myDate.getDate(); // 获取系统日，
    var day = myDate.getDate()<10?'0'+myDate.getDate():myDate.getDate()
    var hours = myDate.getHours()<10?'0'+myDate.getHours():myDate.getHours()
    var min =myDate.getMinutes()<10?'0'+myDate.getMinutes():myDate.getMinutes()
    this.startDate=myDate.getFullYear()+'-'+m+'-'+day
    this.end=myDate.getFullYear()+'-'+m+'-'+day+' '+hours+':'+min
    this.getInfo();
  },
  methods: {
        previewImg(url){//图片预览
        this.selectImg=url
        this.flag=true
        },
        logIndexChange (arg) {
            console.log(arg)
        },
        // 图片放大
        show (index) {
            console.log(index)
            this.$refs.previewer.show(index)
        },
        time(){
            this.num=true
        },
        setYSFormData (setFormDatalength, file) {
            this.YSuploadLength=setFormDatalength
        },
        ent(){
            this.rectifydateRemark=this.checkArea
            this.classValue=false
        },
        clear(){
            this.checkArea=''
        },
        getInfo() {
                var useraccount=window.localStorage.getItem('useraccount')
                this.params.id=this.$route.query.id; //id
                this.$axiosAjax.illegalGet(this.params).then(res => {
                    if (res.data.success == true) {
                        this.info = res.data.result;
                        var arrImg =[]
                        
                        for(var k of res.data.result.projectImgList){
                            var obj =[]
                            obj.src =k.url
                            obj.w=1200
                            obj.h=900
                            arrImg.push(obj)
                        }
                        this.list=arrImg
                        this.status2=res.data.result.status
                        this.rectifyListArr=res.data.result.rectifyList
                        // if (useraccount==this.info.weizCheckZrrId) {
                        //     this.subBtn=true
                        // }
                        for (var j of res.data.result.rectifyList){
                            if(res.data.result.status==1&&j.rectifystatus==0){
                                this.end=j.rectifydate
                            } else {
                                // this.subBtn=false
                            }
                            if (j.rectifystatus==0){
                                this.$store.state.illegalDepartId =j.id
                            }
                        }
                        
                    }
                }).catch(err => {})
        },
        // 提交
        enter(){
                if(this.rectifydateRemark&&
                this.YSuploadLength>0
                ){
                    // this.end=this.end+' '+'00'+':'+'00'+':'+'00'
                    for (var k of this.info.rectifyList){
                        if (k.rectifystatus==0){
                            k.rectifydateRemark=this.rectifydateRemark
                            k.rectifydate=this.end
                        }
                    }
                    this.info.status=this.info.status+1
                    this.$axiosAjax.illegalSubmit(this.info).then(res => {
                        if (res.data.success == true) {
                            this.$router.go(-1)
                        }else {
                            this.$vux.toast.text(res.data.result)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }else if(this.YSuploadLength<=0){
                    this.$vux.toast.text('违章整改后图片必填')
                }else if(!this.rectifydateRemark){
                    this.$vux.toast.text('整改情况回复必填')
                } 
        }
    },
};
</script>
<style lang="less" socped>
#illegalDetails2{
    position: relative;
    .form-item-style1{
      height: 40px;
      line-height: 40px;
    }
    .label-title{
        width: 160px;
    }
    .form-item {
        margin-left: 0;
        padding-left: 20px;
        label {
            font-weight: normal;
            width: 160px;
        }
        .input_div{
            input{
                height: 40px;
                line-height: 40px;
                color: #666!important;
                overflow:hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            > span:first-child {
            margin-left: 0;
            }
            .vux-x-icon {
            fill: #666!important;
            float: right;
            margin-top: 17px;
            }
        }
    }
    .form-item .vux-cell-value{
        height: 40px;
        line-height: 40px;
        margin-top: 0!important;
    }
    .imgDiv{
        border-bottom: 1px solid rgb(239, 239, 244);
        padding: 0 20px;
        .left_label{
            height: 40px;
            font-size: 14px;
            line-height: 40px;
        }
        img{
            width: 50px;
            height: 50px;
            margin: 2px 2px 0 0;
        }
        .imgUl{
            width: 100%;
            margin-bottom: 6px;
            img{
                width: 50px;
                height: 50px;
                margin: 2px 2px 0 0;
            }
        }
    }
    .btns_div {
        background: #ebeef2;
        padding: 30px 20px 55px;
        justify-content: space-between;
        display: flex;
        a {
            height: 40px;
            border-radius: 20px;
            display: inline-block;
            width: 140px;
            text-align: center;
            line-height: 40px;
            color: #fff;
        }
        .submitBtn {
            background: #469b7a;
        }
        .cancelBtn {
            background: #ffb400;
        }
    }
    .form-item .weui-cell_access .weui-cell__ft::after{
        margin-top: -5px;
    }
    .vux-cell-primary{
        height: 40px;
        .vux-cell-value{
            margin-top: 0;
        }
    }
    .form-item .vux-no-group-title{
        height: 40px!important;
    }
}
.transfer_p{
    padding: 10px 20px;
    height: 30px;
    span,em{
        width: 60px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-size: 16px;
        border-radius: 5px;
        color: #fff;
    }
    span{
        float: left;
        background-color:#2abf72;
    }
    em{
        float: right;
        background-color: #ceaa6c;
    }
}
.weui-cell__bd{
    height: 200px!important;
}
#tt {
    background-color: #eee;
    .weui-cell__bd .weui-textarea{
        height: 180px!important;
        background-color: #fff;
    }
}

</style>
